/** Menu样式 */
.kd-menu {
    display: flex;
    flex-wrap: wrap;
    gap: $menu-gap;
    padding-left: 0;
    list-style: none;

    .kd-memu-item {
        padding: $menu-item-padding-y $menu-item-padding-x;
        cursor: pointer;
        border-bottom: $menu-item-active-border-width solid transparent;
        transition: $menu-transition;

        &:hover,
        &:focus {
            color: $menu-item-active-color;
        }

        &.is-active {
            color: $menu-item-active-color;
            border-bottom: $menu-item-active-border-width solid $menu-item-active-color;
        }

        &.is-disabled {
            color: $menu-item-disabled-color;
            pointer-events: none;
            cursor: default;
        }
    }
}

/** SubMenu样式 */
.kd-menu {
    .kd-memu-item-submenu {
        position: relative;
    }

    .kd-submenu {
        position: absolute;
        top: calc(100% + 8px);
        // opacity: 0;
        // display: none;
        pointer-events: auto;
        padding-left: 0;
        list-style: none;
        min-width: 120px;
        color: $body-color;
        box-shadow: $submenu-box-shadow;

        .kd-memu-item {
            border-bottom: 0;
            border-left: $menu-item-active-border-width solid transparent;

            &.is-active {
                color: $menu-item-active-color;
                border-bottom: 0;
                border-left: $menu-item-active-border-width solid $menu-item-active-color;
            }

            &:hover,
            &:focus {
                color: $menu-item-active-color;
            }
        }
    }

    .kd-submenu-title {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    // 添加子菜单图标在展开和收起是时的动效
    .arrow-icon {
        transition: transform 0.3s ease-in-out;
    }

    .kd-memu-item-submenu.is-opened {
        .arrow-icon {
            transform: rotate(180deg);
        }
    }


    // .kd-submenu.menu-opened {
    //     opacity: 1;
    //     pointer-events: auto;
    // }
}

.kd-menu-vertical {
    flex-direction: column;

    .kd-memu-item {
        border-bottom: 0;
        border-left: $menu-item-active-border-width solid transparent;



        &.is-active {
            color: $menu-item-active-color;
            border-bottom: 0;
            border-left: $menu-item-active-border-width solid $menu-item-active-color;

            &.kd-memu-item-submenu {
                border-left: $menu-item-active-border-width solid transparent;
            }

            .kd-submenu-title::before {
                position: absolute;
                left: -$menu-item-padding-x;
                content: '';
                display: block;
                width: $menu-item-active-border-width;
                height: 100%;
                background-color: $menu-item-active-color;
            }
        }
    }

    .kd-submenu-title {
        position: relative;
    }

    .kd-submenu {
        position: relative;
        padding-left: 3px;
        padding-top: 8px;
        box-shadow: none;
    }
}


// 使用React Transition Group后，
// 我们只需要在下面的样式中设置好组件进场和退场的过渡动效，无需在被包裹的组件的样式中进行任何修改
// 因此，它具有很强的复用性，可以单独封装成组件使用
// 1. 用于控制子菜单进场时的动画
.fade-enter {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
}

.fade-enter-active {
    opacity: 1;
    transform: scaleY(1);
    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

// 2. 用于控制子菜单退场时的动画
.fade-exit {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
}

.fade-exit-active {
    opacity: 0;
    transform: scaleY(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}